<template>
  <div class="card-wrapper" v-if="props.source">
    <img
      :src="
        props.source?.src ||
        props.source?.screenshot ||
        'https://varlet.pages.dev/cat.jpg'
      "
      width="100%"
      class="banner"
    />
    <div class="card-info" :style="{gridTemplateColumns: props.parentCom !== 'home' ? `1.9rem calc(100% - 3.7rem) 1.8rem`:`1.9rem calc(100% - 2rem)`}">
      <img
        :src="
          props.source?.src ||
          props.source?.screenshot ||
          'https://varlet.pages.dev/cat.jpg'
        "
        class="title-icon"
      />
      <div class="info-box">
        <h5>{{ props.source?.title || props.source?.name || '' }}</h5>
        <p>{{ props.source?.describe || '' }}</p>
      </div>
      <div class="icon-box" v-if="props.parentCom !== 'home'">
        <var-icon name="heart" class="icon" />
        <span class="icon-text">99</span>
      </div>
    </div>
  </div>
</template>
<script setup name="Card">
import { defineProps } from 'vue';

const props = defineProps({
  source: {
    type: Object,
    default: () => {},
  },
  parentCom: {
    type: String,
    default:'home'
  }
});
</script>
<style scoped lang="less">
.card-wrapper {
  width: 100%;
  height: 8.2667rem;
  border-radius: 0.8rem;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 4px #ddd;
  .card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3rem;
    width: 100%;
    border-radius: 0.8rem;
    box-shadow: 0 2px 4px #ddd;
    overflow: hidden;
    display: grid;
    
    align-items: center;
    background-color: #fff;
    .title-icon {
      width: 1.6rem;
      height: 1.6rem;
      border-radius: 50%;
      margin-left: 0.1rem;
    }
    .info-box {
      width: 100%;
      h5 {
        margin: 0;
        padding: 0;
        font-size: .9rem;
        line-height: 1.1rem;
        color: #444;
        font-weight: 400;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      p {
        padding: 0;
        margin: 0;
        font-weight: 200;
        font-size: 0.85rem;
        line-height: 1.1rem;
        color: #555;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .icon-box {
      @IconWidth: 1.6rem; // 定义变量
      position: relative;
      width: @IconWidth;
      height: @IconWidth;
      .icon {
        font-size: 1.6rem;
        color: var(--system-primary-color);
      }
      .icon-text {
        position: absolute;
        top: calc(50% - 30%);
        left: calc(50% - 0.4rem);
        z-index: 10;
        width: @IconWidth;
        height: 1rem;
        font-size: 0.7rem;
        color: #fff;
      }
    }
  }
}
</style>
